import {
    Form,
    Input,
    Button,
    Upload,
    message,
} from 'antd';
import {UploadOutlined} from '@ant-design/icons';
import ProTable, {ActionType} from '@ant-design/pro-table';
import type {ProColumns} from '@ant-design/pro-table';
import {saveUploaInfo, uploadList} from "@/services/login";
import {useRef} from "react";


const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};

const normFile = (e) => {
    if (Array.isArray(e)) {
        return e;
    }

    return e && e.fileList;
};

const props = {
    name: 'file',
    action: 'http://localhost:9033/file/upload',
    headers: {
        accessToken: localStorage.accessToken
    },
    fileList: [],
    maxCount: 1,
    onChange(info) {
        if (info.file.status !== 'uploading') {
        }
        if (info.file.status === 'done') {
            if (info.file.response.code===0){
                message.success(`${info.file.name} ${info.file.response.msg} `);
            }else {
                message.error(`${info.file.name} ${info.file.response.msg} `);
            }

        } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
        }
    },
};

export type Upload = {
    date: string;
    note: string;
    status: string;
    explain: string;
};
const columns: ProColumns<Upload>[] = [
    {
        dataIndex: 'id',
        title: 'ID',
    },
    {
        dataIndex: 'date',
        title: 'Date',
    },
    {
        dataIndex: 'note',
        title: 'Note',
    },
    {
        dataIndex: 'status',
        title: 'Status',
    },
    {
        dataIndex: 'explain',
        title: 'Explain',
    }
];
const handleSubmit = async (upUrl, note) => {
    const msg = await saveUploaInfo({
        url: upUrl,
        content: note
    });
    if (msg.code === 0) {
        message.success("Save Success");
        return;
    }

};


export default () => {
    const tablea = useRef<ActionType>();
    const onFinish = (values) => {
        console.log("~~~~~", values.upload[0].response.data.url)
        handleSubmit(values.upload[0].response.data.url, values.note).then(()=>{
            tablea.current?.reload();
        })
    };

    return (
        <div>

            <Form
                name="validate_other"
                {...formItemLayout}
                onFinish={onFinish}
                initialValues={{
                    'input-number': 3,
                    'checkbox-group': ['A', 'B'],
                    rate: 3.5,
                }}
            >
                <Form.Item
                    name="upload"
                    label="Upload"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                >
                    <Upload {...props}>
                        <Button icon={<UploadOutlined/>}>Click to upload</Button>
                    </Upload>
                </Form.Item>

                <Form.Item label="Note" name="note">
                    <Input.TextArea showCount maxLength={100} allowClear placeholder="Can't be emptye"/>
                </Form.Item>
                <Form.Item
                    wrapperCol={{
                        span: 12,
                        offset: 6,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        Submit
                    </Button>
                </Form.Item>
            </Form>
            <ProTable<Upload>
                locale={{ emptyText:"No Data"}}
                bordered={true}
                actionRef={tablea}
                columns={columns}
                request={async (params: any) => {
                    const response = await uploadList({
                        page: {
                            currentPage: params.current,
                            pageSize: params.pageSize,
                        }
                    });

                    let {data: {list}} = response;
                    return {data: list, success: true};
                }}
                pagination={false}
                toolBarRender={false}
                search={false}
            />
        </div>

    );
};
